<template>
    <div class="receive" :class="{ active: isShow }" @click.stop="updateReceive">
        <div class="content" :class="{ active: isShow }" @click.stop>
            <slot></slot>
        </div>
    </div>
</template>
<script>
export default {
    name: "DrawerComponent",
    props: {
        isShow: Boolean,
        updateReceive: Function,
    },
    data() {
        return {
            marginTop: 0,
        }
    },
}
</script>
<style lang="scss" scoped>
.receive {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: transparent;
    z-index: -100;
    overflow: hidden;
    transition: all .3s;

    &.active {
        opacity: 1;
        z-index: 100;
        background-color: rgba(0, 0, 0, .3);
    }

    .content {
        position: absolute;
        bottom: 0;
        width: 100vw;
        height: 80vh;
        overflow: scroll;
        background-color: rgb(255, 255, 255);
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        padding: 15px 10px;
        transition: all .3s;
        transform: translateY(100%);

        &.active {
            transform: translateY(0);
        }
    }
}
</style>